---
description: Расширенный компонент ячейки для отображения комплексной информации.
---

<Overview group="data-display">

# RichCell [tag:component]

Расширенный компонент ячейки для отображения комплексной информации. Идеален для карточек пользователей, списков транзакций и элементов с мета-информацией.

</Overview>

<Playground>
  ```jsx
  <RichCell
    before={<Avatar size={72} />}
    overTitle="Команда ВКонтакте"
    subtitle="Санкт-Петербург"
    actions={
      <ButtonGroup mode="horizontal" gap="s" stretched>
        <Button mode="primary" size="s">
          Принять
        </Button>
        <Button mode="secondary" size="s">
          Отклонить
        </Button>
      </ButtonGroup>
    }
  >
    Илья Гришин
  </RichCell>
  ```
</Playground>

## Основные возможности

### Визуальные блоки

#### Контент в начале/в конце

В компоненте доступна возможность добавления дополнительного контента слева и/или справа от основной информации,
задаётся свойством `before` и `after` соответственно.

В `before` рекомендуется размещать следующий контент:

- аватары `Avatar` размером `40px`, `48px` и `72px`;

В `after` рекомендуется размещать следующий контент:

- иконки размером `28px` (используйте `RichCell.Icon`);
- текст для кратких значений (суммы, проценты).

### Текстовые элементы

Компонент поддерживает следующие текстовые элементы:

- `overTitle` — надзаголовок;
- `subtitle` — основной подзаголовок;
- `extraSubtitle` — дополнительное описание;
- `afterCaption` — пояснение к правому блоку.

### Интерактивные элементы

Для группы кнопок (`actions`) рекомендуется:

- использовать кнопки размера `s`;
- применять режимы `primary` и `secondary`.

## Выравнивание элементов

Управляет вертикальным выравниванием частей компонента. Особенно полезно для нестандартных сценариев.

### Свойства выравнивания

Компонент поддерживает следующие свойства:

- `beforeAlign` — позиция левого блока;
- `contentAlign` — позиция основного текстового контента;
- `afterAlign` — позиция правого блока.

<Playground>
  ```jsx
  <RichCell
    beforeAlign="center"
    contentAlign="center"
    afterAlign="center"
    before={<Icon56WalletOutline />}
    after="+5%"
    afterCaption="Кэшбек"
  >
    <Text weight="2">Премиум статус</Text>
    <Text>Активен до 12.12.2024</Text>
  </RichCell>
  ```
</Playground>

## Многострочный режим

Задаётся свойством `multiline`. Позволяет тексту занимать несколько строк при переполнении.

### Особенности

Компонент в многострочном режиме:

- включает перенос текста для всех текстовые элементов;
- сохраняет вертикальные отступы;
- автоматически определяет высоту.

<Playground>
  ```jsx
  <RichCell
    multiline
    subtitle="Длинное описание новости, которое не должно обрезаться и требует переноса на несколько строк для полного отображения информации пользователю"
    after="15:30"
    afterCaption="Время публикации"
  >
    Важное обновление правил платформы
  </RichCell>
  ```
</Playground>

## Свойства и методы [#api]

<PropsTable name="RichCell" />
